var MixlyDomGenerator = {};

class MixlySerialDomGenerator {
    constructor(id, type, serialConfig) {
        this._id = id;
        this._type = type;
        this._config = this.getConfig(serialConfig);
        this._htmlStr = this.getHtmlStr();
    }

    getConfig(config) {
        let _defaultConfig = {
            "baudRates": 9600,
            "ctrlCBtn": false,
            "ctrlDBtn": false,
            "dtr": true,
            "rts": true,
            "pointNum": 100,
            "yMax": 100,
            "yMin": 0
        }
        let _config = {};
        for (let key in _defaultConfig) {
            _config[key] = config[key] ?? _defaultConfig[key];
        }
        return _config;
    }

    getHtmlStr() {
        let {
            formId,
            setDtrId,
            setRtsId,
            selectPortId,
            selectBaudId,
            connectBtnId,
            sendTypeId,
            sendId,
            sendWithId,
            sendBtnId,
            receiveTypeId,
            scrollId,
            receiveId,
            clearBtnId,
            ctrlCBtnId,
            ctrlDBtnId,
            yMinId,
            yMaxId,
            pointNumId,
            chartSendTypeId,
            chartSendId,
            chartSendWithId,
            chartSendBtnId,
            dataDrawId,
            moveId
        } = this.getId();

        let {
            formFilter,
            setDtrFilter,
            setRtsFilter,
            selectPortFilter,
            selectBaudFilter,
            sendTypeFilter,
            chartSendTypeFilter,
            tabFilter
        } = this.getFilter();

        /* 串口监视器 */
        //串口选择div
        let selectPortDivStr = `
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="height: 44px;padding-top: 1px;padding-bottom: 1px;">
                <p style="display:inline;">串口</p>
                <input style="display:none;">
                <input id="${setDtrId}" type="checkbox" title="DTR" lay-filter="${setDtrFilter}" lay-skin="primary" ${this._config.dtr ? "checked" : ""}>
                <input id="${setRtsId}" type="checkbox" title="RTS" lay-filter="${setRtsFilter}" lay-skin="primary" ${this._config.rts ? "checked" : ""}>
            </label>
            <div class="layui-input-inline" style="width:50%;clear:none;">
                <select id="${selectPortId}" lay-verify="required" lay-filter="${selectPortFilter}"></select>
            </div>
            <div class="layui-input-inline" style="width:38%;clear:none;">
                <select id="${selectBaudId}" lay-filter="${selectBaudFilter}">
                    <option value="9600" ${this._config.baudRates == 9600 ? "selected" : ""}>9600</option>
                    <option value="19200" ${this._config.baudRates == 19200 ? "selected" : ""}>19200</option>
                    <option value="28800" ${this._config.baudRates == 28800 ? "selected" : ""}>28800</option>
                    <option value="38400" ${this._config.baudRates == 38400 ? "selected" : ""}>38400</option>
                    <option value="57600" ${this._config.baudRates == 57600 ? "selected" : ""}>57600</option>
                    <option value="115200" ${this._config.baudRates == 115200 ? "selected" : ""}>115200</option>
                </select>
            </div>
            <button id="${connectBtnId}" class="layui-btn layui-btn-normal" style="width:12%;">连接</button>
        </div>`;

        //串口发送数据div
        let sendDivStr = `
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="height: 44px;padding-top: 1px;padding-bottom: 1px;">
                <p style="display:inline;">发送数据</p>
                <input style="display:none;">
                <input id="${sendTypeId}" type="checkbox" title="字符串" lay-filter="${sendTypeFilter}" lay-skin="primary" checked>
            </label>
            <div class="layui-input-inline" style="width:70%;clear:none;">
                <input id="${sendId}" type="text" name="title" placeholder="请输入内容" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width:18%;clear:none;">
              <select id="${sendWithId}">
                <option value="no">no</option>
                <option value="\\n">\\n</option>
                <option value="\\r">\\r</option>
                <option value="\\r\\n" selected>\\r\\n</option>
              </select>
            </div>
            <button id="${sendBtnId}" class="layui-btn layui-btn-normal" style="width:12%;">发送</button>
        </div>`;

        //串口接收数据div
        let receiveDivStr = `
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="height: 44px;padding-top: 1px;padding-bottom: 1px;">
                <p style="display:inline;">接收数据</p>
                <input style="display:none;">
                <input id="${receiveTypeId}" type="checkbox" title="字符串" lay-skin="primary" checked>
                <input id="${scrollId}" type="checkbox" title="滚屏" lay-skin="primary" checked>
            </label>
            <div class="layui-input-block">
                <textarea readonly id="${receiveId}" name="desc" wrap="off" spellcheck="false" placeholder="串口输出" class="layui-textarea" style="height:220px"></textarea>
            </div>
        </div>`;

        //串口控制按钮div
        let ctrlBtnDivStr = `
        <div class="layui-form-item layui-form-text">
            <div style="text-align: center;"> 
                <button id="${clearBtnId}" class="layui-btn layui-btn-danger">清空</button>
                ${this._config.ctrlCBtn ? `<button id="${ctrlCBtnId}" class="layui-btn layui-btn-danger">中断</button>` : ''}
                ${this._config.ctrlDBtn ? `<button id="${ctrlDBtnId}" class="layui-btn layui-btn-danger">复位</button>` : ''}
            </div>
        </div>`;

        /* 串口绘图器 */
        //串口绘图设置div
        let drawSettingDivStr = `
        <div class="layui-form-item layui-form-text">
            <div class="layui-input-inline" style="width:15%;clear:none;">
                <label class="layui-form-label">最小</label>
                <input id="${yMinId}" type="text" name="title" autocomplete="off" class="layui-input" value="${this._config.yMin}">
            </div>
            <div class="layui-input-inline" style="width:15%;clear:none;">
                <label class="layui-form-label">最大</label>
                <input id="${yMaxId}" type="text" name="title" autocomplete="off" class="layui-input" value="${this._config.yMax}">
            </div>
            <div class="layui-input-inline" style="width:15%;clear:none;">
                <label class="layui-form-label">点数</label>
                <select id="${pointNumId}">
                    <option value="50" ${this._config.pointNum == "50" ? "selected" : ""}>50</option>
                    <option value="100" ${this._config.pointNum == "100" ? "selected" : ""}>100</option>
                    <option value="150" ${this._config.pointNum == "150" ? "selected" : ""}>150</option>
                    <option value="200" ${this._config.pointNum == "200" ? "selected" : ""}>200</option>
                    <option value="250" ${this._config.pointNum == "250" ? "selected" : ""}>250</option>
                    <option value="300" ${this._config.pointNum == "300" ? "selected" : ""}>300</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width:55%;clear:none;">
                <label class="layui-form-label" style="height: 44px;padding-top: 1px;padding-bottom: 1px;">
                    <p style="display:inline;">发送数据</p>
                    <input style="display:none;">
                    <input id="${chartSendTypeId}" type="checkbox" title="字符串" lay-filter="${chartSendTypeFilter}" lay-skin="primary" checked>
                </label>
                <div class="layui-input-inline" style="width:50%;clear:none;">
                    <input id="${chartSendId}" type="text" name="title" placeholder="请输入内容" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:25%;clear:none;">
                    <select id="${chartSendWithId}">
                        <option value="no">no</option>
                        <option value="\\n">\\n</option>
                        <option value="\\r">\\r</option>
                        <option value="\\r\\n" selected>\\r\\n</option>
                    </select>
                </div>
                <button id="${chartSendBtnId}" class="layui-btn layui-btn-normal" style="width:25%;">发送</button>
            </div>
        </div>`;

        //串口绘图div
        let drawChartsDivStr = `
        <div class="layui-form-item layui-form-text" style="padding-top: 25px;">
            <div id="${dataDrawId}" style="width: 100%;">
            </div>
        </div>`;

        let innerHtmlStr = `
        <div id="${moveId}" style="height: 10px;width: 100%;"></div>
        <div class="layui-tab" lay-filter="${tabFilter}" style="width: 100%;height: 100%;margin-top: 0px;margin-bottom: 0px;position: relative;">
            <ul class="layui-tab-title" style="position: absolute;left: 0px;top: 0px;height: 40px;right: 0px;">
                <li class="layui-this" lay-id="1">串口监视器</li>
                <li lay-id="2">串口可视化</li>
            </ul>
            <div class="layui-tab-content" style="position: absolute;left: 0px;top: 40px;bottom: 0px;right: 0px;overflow: auto;">
                <div class="layui-tab-item layui-show">
                    ${this._type == 1 ? selectPortDivStr : ""}
                    ${sendDivStr}
                    ${receiveDivStr}
                    ${ctrlBtnDivStr}
                </div>
                <div class="layui-tab-item">
                    ${drawSettingDivStr}
                    ${drawChartsDivStr}
                </div>
            </div>
        </div>`;

        //串口监视器&绘图器div
        let formStr = `
        <div class="layui-form layui-form-pane" id="${formId}" lay-filter="${formFilter}">
            ${innerHtmlStr}
        </div>`;

        return [formStr, innerHtmlStr];
    }

    generateDom() {
        let { formId } = this.getId();
        let { formFilter } = this.getFilter();
        layui.use(['layer', 'form'], function () {
            let _divObj = document.createElement("div");
            _divObj.innerHTML = this._htmlStr[1];
            _divObj.className = "layui-form layui-form-pane";
            _divObj.id = formId;
            _divObj.style.display = "none";
            _divObj.setAttribute("lay-filter", formFilter);
            document.body.appendChild(divObj);
            form.render(null, formFilter);
        });
    }

    getId() {
        let _id = {
            "pageId": `serial-page-${this._id}`,
            "formId": `serial-${this._id}`,
            "setDtrId": `serial-set-dtr-${this._id}`,
            "setRtsId": `serial-set-rts-${this._id}`,
            "selectPortId": `serial-selectport-${this._id}`,
            "selectBaudId": `serial-selectbaud-${this._id}`,
            "connectBtnId": `serial-connectbtn-${this._id}`,
            "sendTypeId": `serial-sendtype-${this._id}`,
            "sendId": `serial-send-${this._id}`,
            "sendWithId": `serial-sendwith-${this._id}`,
            "sendBtnId": `serial-sendbtn-${this._id}`,
            "receiveTypeId": `serial-receivetype-${this._id}`,
            "scrollId": `serial-scroll-${this._id}`,
            "receiveId": `serial-receive-${this._id}`,
            "clearBtnId": `serial-clearbtn-${this._id}`,
            "ctrlCBtnId": `serial-interruptbtn-${this._id}`,
            "ctrlDBtnId": `serial-resetbtn-${this._id}`,
            "yMinId": `serial-ymin-${this._id}`,
            "yMaxId": `serial-ymax-${this._id}`,
            "pointNumId": `serial-pointnum-${this._id}`,
            "chartSendTypeId": `serial-chartsendType-${this._id}`,
            "chartSendId": `serial-chartsend-${this._id}`,
            "chartSendWithId": `serial-chartsendWith-${this._id}`,
            "chartSendBtnId": `serial-chartsendBtn-${this._id}`,
            "dataDrawId": `serial-datadraw-${this._id}`,
            "moveId": `serial-move-${this._id}`
        }

        return _id;
    }

    getFilter() {
        let _filter = {
            "formFilter": `serial-filter-${this._id}`,
            "setDtrFilter": `serial-set-dtr-filter-${this._id}`,
            "setRtsFilter": `serial-set-rts-filter-${this._id}`,
            "selectPortFilter": `serial-selectport-filter-${this._id}`,
            "selectBaudFilter": `serial-selectbaud-filter-${this._id}`,
            "sendTypeFilter": `serial-sendtype-filter-${this._id}`,
            "chartSendTypeFilter": `serial-chartsendtype-filter-${this._id}`,
            "tabFilter": `serial-tab-filter-${this._id}`
        }

        return _filter;
    }

    adjustSerialTool(layero, index) {
        try {
            var nowPage = document.getElementById(layero.selector.replace("#", ""));
            nowPage.style.minWidth = "600px";
            nowPage.style.minHeight = "300px";
            nowPage.style.maxWidth = "710px";
            nowPage.style.maxHeight = "600px";
            var now_height = document.documentElement.clientHeight;
            var now_width = document.documentElement.clientWidth;
            nowPage.style.left = (now_width - nowPage.clientWidth) / 2 + "px";
            nowPage.style.top = (now_height - nowPage.clientHeight) / 2 + "px";
            nowPage.style.borderRadius = "8px";
        } catch (e) {
            console.log(e);
        }

        var serialPage = document.getElementById(pageId);
        serialPage.style.overflow = "hidden";
        serialPage.style.maxWidth = "710px";
        serialPage.style.maxHeight = "600px";
        serialPage.style.minWidth = "600px";
        serialPage.style.minHeight = "300px";
        serialPage.style.borderRadius = "8px";

        layero[0].childNodes[1].childNodes[0].classList.remove('layui-layer-close2');
        layero[0].childNodes[1].childNodes[0].classList.add('layui-layer-close1');
    }

    openSerialTool(sucFunc, endFunc) {
        layui.use(['layer', 'form'], function () {
            let layer = layui.layer;
            let serial_com_update = null;
            let form = layui.form;
            let { moveId, pageId } = this.getId();
            let { formFilter } = this.getFilter();

            layer.open({
                type: 1,
                id: pageId,
                title: false,
                area: ["90%", "95%"],
                closeBtn: 1,
                resize: true,
                fixed: true,
                move: $(moveId),
                content: this.getHtmlStr()[0],
                success: function (layero, index) {
                    form.render(null, formFilter);
                    this.adjustSerialTool(layero, index);
                    sucFunc();
                },
                end: function () {
                    endFunc();
                }
            });
        });
    }

    formOnClick(type, filter, doFunc) {
        layui.use(['layer', 'form'], function () {
            form.on(type + "(" + filter + ")", function (data) {
                doFunc(data);
            });
        });
    }

    elementOnClick(type, filter, doFunc) {
        layui.use(['layer', 'element'], function () {
            element.on(type + "(" + filter + ")", function (elem) {
                doFunc(elem);
            });
        });
    }

    formOnClickSetDtr(doFunc) {
        let { setDtrFilter } = this.getFilter();
        this.formOnClick("checkbox", setDtrFilter, doFunc);
    }

    formOnClickSetRts(doFunc) {
        let { setRtsFilter } = this.getFilter();
        this.formOnClick("checkbox", setRtsFilter, doFunc);
    }

    formOnClickSelectPort(doFunc) {
        let { selectPortFilter } = this.getFilter();
        this.formOnClick("select", selectPortFilter, doFunc);
    }

    formOnClickSelectBaud(doFunc) {
        let { selectBaudFilter } = this.getFilter();
        this.formOnClick("select", selectBaudFilter, doFunc);
    }

    elementOnClickTab(doFunc) {
        let { tabFilter } = this.getFilter();
        this.elementOnClick("select", tabFilter, doFunc);
    }
}
